<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>演员列表</title>
    <link href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js"></script>

    <script>
        var myApp=angular.module('actorsApp', []);
    </script>
    <script type="text/javascript" src="/js/actors.js"></script>
    <script type="text/javascript" src="/js/header.js"></script>
</head>
<body ng-app="actorsApp">
<!--导航-->
<header class="am-topbar am-topbar-fixed-top"  ng-controller="headerCtrl">
    <div class="am-container">
        <!--logo-->
        <h1 class="am-topbar-brand">
            <img src="/img/logo.jpg" height="43" width="139"/>
        </h1>

        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li ><a href="/index">首页</a></li>
                <li ><a href="/tolist">电影列表</a></li>
                <li class="am-active"><a href="#">演员列表</a></li>
                <li><a href="/box-office">实时票房</a></li>
            </ul>

            <div class="{{passport}}">
                <div class="am-topbar-right">
                    <button onclick="window.location.href='/toregister'"
                            class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-radius">
                        <span class="am-icon-pencil"></span> 注册
                    </button>
                </div>
                <div class="am-topbar-right">
                    <button onclick="window.location.href='/tologin'"
                            class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-radius">
                        <span class="am-icon-user"></span> 登陆
                    </button>
                </div>
            </div>

            <div class="{{userinfo}}">
                <div class="am-topbar-right">
                    <button ng-click="exit()"
                            class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-radius">
                        <span class="am-icon-sign-out"></span> 退出
                    </button>
                </div>
                <div class="am-topbar-right" ng-click="myInfo()">
                    <img src="http://ozqy003kk.bkt.clouddn.com/{{img}}" width="48px" class="am-img-thumbnail am-circle" style="margin-right: 10px"/>
                </div>
            </div>

        </div>
    </div>
</header>

<!--电影部分-->
<div class="am-container" style="text-align:center" ng-controller="actorsCtrl">
    <div class="am-g" style="color:#FFF">
        留白
    </div>

    <!--搜索框-->
    <div class="am-input-group am-input-group-primary" style="width: 60%;margin:0 auto">
        <span class="am-input-group-btn">
            <button class="am-btn am-btn-primary am-round" type="button"
                    ng-click="selectActorName()">
                <span class="am-icon-search"></span>
            </button>
        </span>
        <input type="text" class="am-form-field am-round" placeholder="搜索电影 演员 "
               ng-model="name"/>
    </div>

    <div class="am-g" style="color:#FFF">
        1
    </div>

    <!--所有演员列表-->
    <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">

        <li ng-repeat="actor in actorList">
            <div class="am-thumbnail" ng-click="info(actor.actorid)">
                <img src="http://ozqy003kk.bkt.clouddn.com/{{actor.img}}" style="width: 170px;height: 256px"/>
                <h3 class="am-thumbnail-caption">{{actor.namecn}}</h3>
            </div>
        </li>

    </ul>
    <!--分页-->
    <ul class="am-pagination am-pagination-right">
        <li ng-click="changePage(0)"><a href="">«</a></li>

        <li ng-click="changePage(num)" ng-repeat="num in pageNums"
            ng-class="{'am-active':show==={{num}}}">
            <a href="">{{num}}</a>
        </li>

        <li ng-click="changePage(999)"><a href="">»</a></li>
    </ul>
</div>

<!--弹窗-->
<div class="am-modal am-modal-alert" tabindex="-1" id="movies-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            已退出登录
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
</body>
</html>